Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make "m" the default size of EuiButton #1742

Merged
merged 10 commits into from
Mar 20, 2019
Merged

Make "m" the default size of EuiButton #1742

merged 10 commits into from
Mar 20, 2019

Conversation

Kerry350
Copy link
Contributor

Summary

This updates the prop type comment for EuiButtonGroup and the TypeScript definition for EuiButtonGroup, this is to normalise a bit of drift between what EuiButtonGroup and EuiButton were declaring as valid button sizes, beforehand:

  • EuiButtonGroup used "s" and mentioned "m" in the docs
  • EuiButtonGroup TypeScript definitions defined size as "s" | "m"

However, once these props were passed down to EuiButton this would cause a console warning using "m" due to EuiButton supporting "s" and "l" only.

Given "m" and "l" both produce buttons of the same size, I've just removed the notion of "m" from EuiButtonGroup (hopefully this is okay - I've checked it against the docs site and Kibana).

Checklist

  • This was checked in mobile
  • This was checked in IE11
  • This was checked in dark mode
  • Any props added have proper autodocs
  • Documentation examples were added
  • A changelog entry exists and is marked appropriately
  • This was checked for breaking changes and labeled appropriately
  • Jest tests were updated or added to match the most common scenarios
  • This was checked against keyboard-only and screenreader scenarios
  • This required updates to Framer X components

@cchaos
Copy link
Contributor

cchaos commented Mar 19, 2019 •
edited
Loading

So unfortunately this is a breaking change to anyone consuming EuiButtonGroup and the sizes s | m are actually correct, it's just that EuiButton doesn't actually declare the m size (it's the null) size. So I think the real fix would be to change EuiButton's default size from null to m.

Basically add an m size to this map and make it the default:

eui/src/components/button/button.js

Lines 27 to 30 in 063b47d

const sizeToClassNameMap = {
s: 'euiButton--small',
l: 'euiButton--large',
};

@Kerry350
Copy link
Contributor Author

@cchaos Thanks for the pointers, I've changed this to align with your suggestion 👍

@cchaos
Copy link
Contributor

cchaos commented Mar 19, 2019

Thanks, can you also update the name of this PR and add a changelog entry?

@Kerry350 Kerry350 changed the title Update EuiButtonGroup buttonSize Make "m" the default size of EuiButton Mar 19, 2019
@Kerry350
Copy link
Contributor Author

Thanks, can you also update the name of this PR and add a changelog entry?

Done 👍

@cchaos
Copy link
Contributor

cchaos commented Mar 19, 2019

Can you clean your test cache and then update the tests again:

yarn run test-unit -- --clearCache
yarn run test-unit -- -u

cchaos
cchaos reviewed Mar 19, 2019
View reviewed changes
CHANGELOG.md Outdated Show resolved Hide resolved
@Kerry350
Copy link
Contributor Author

Can you clean your test cache and then update the tests again:

Done, build looks good now.

Sorry for all of the back and forth 🙈

@Kerry350 Kerry350 self-assigned this Mar 20, 2019
@cchaos
Copy link
Contributor

cchaos commented Mar 20, 2019

No problem, thank you for updating this! There is actually one more place that needs updating too which is the Typescript definition

eui/src/components/button/index.d.ts

Line 27 in bff0469

export type ButtonSize = 's' | 'l';

cchaos
cchaos approved these changes Mar 20, 2019
View reviewed changes
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@Kerry350 Kerry350 merged commit bc991d4 into elastic:master Mar 20, 2019
@Kerry350
Copy link
Contributor Author

@cchaos Ace, thanks for all of the pointers on my first EUI adventure 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cchaos cchaos cchaos approved these changes

Assignees

@Kerry350 Kerry350

Labels
typescript
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@Kerry350 @cchaos @snide